<template>
    <div>
        <search-line @changeRouter="handleSearch">
          <input type="text" placeholder="搜索商品，发现更多优选" v-model="value">
        </search-line>
        <div>
            <ul class="sortList">
               <li @click="selectSortWay(0)" :class="sortWay===0?'selected':''">默认</li>
               <li @click="selectSortWay(1)" :class="sortWay===1?'selected':''">价格最低</li>
               <li @click="selectSortWay(2)" :class="sortWay===2?'selected':''">销量最高</li>
            </ul>
        </div>
        <!-- 为什么key不能解决重加载 -->
        <div :key="sortWay">
            <sortWay0 v-if="sortWay===0"></sortWay0>
            <sortWay1 v-else-if="sortWay===1"></sortWay1>
            <sortWay2 v-else></sortWay2>
        </div>
        <div v-if="isEnd">
          <div style="height:20px;line-height:20px;font-size:20px;text-align:center">
          已经到底了哦！
          </div>
          <a href="youxuan://home"  class="goApp"><span>去熊猫优选APP，找更多优惠</span></a>
          <a href="http://www.cn-ecusc.org.cn/cert/aqkx/site/?site=quan.lukou.com" class="goSave">
              <img src="//static.anquan.org/static/outer/image/aqkx_83x30.png?id=quan.lukou.com?t=2">
          </a>
        </div>
        <!-- 返回顶部插件当组件用 -->
        <vueToTop></vueToTop>
    </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import vueToTop from 'vue-totop'
import { mapMutations, mapState } from 'vuex'
// 局部注册不同排序的组件加载数据
import sortWay0 from '@/components/sortWay0'
import sortWay1 from '@/components/sortWay1'
import sortWay2 from '@/components/sortWay2'
Vue.use(vueToTop)

// 引入加载缓冲组件库
// import { Toast } from 'vant';
// Vue.use(Toast);

// //引入公共Bus传值有问题
// import bus from "@/util/bus"

// 指令拿不到$store，也解决不了重加载
// Vue.directive("list", {
//     inserted(el, bind, vnode, oldnode) {
//         console.log(bind)
//         console.log(vnode.context.$store)
//         // console.log(oldnode)
//         // console.log(this)
//             //word=${vnode.context.InputValue}${vnode.context.InputValue}也可
//         axios.get(`http://quan.lukou.com/api/search?word=$${vnode.context.$store.state.InputValue}&start=0&sort=${bind.value}&couponOnly=NaN&minPrice=0&maxPrice=99999`).then(res => {
//             // console.log(res.data.data.list)
//             res.data.data.list.forEach(item => {
//                 if (item.saleNum >= 10000) {
//                     item.saleNum = (item.saleNum / 10000).toFixed(1) + '万'
//                 }
//             })
//             vnode.context.$store._mutations.setDataList(res.data.data.list)
//             vnode.context.$store._mutations.modifyIsEnd(res.data.data.isEnd)
//             // console.log(res.data.data.list)
//         })
//     },
// })
export default {
  data () {
    return {
      value: this.InputValue,
      loadData: 0,
      sortWay: 0
    }
  },
  components: {
    sortWay0,
    sortWay1,
    sortWay2
  },
  // 加载缓冲插件没用
  // beforeMount(){
  //   Toast.loading({
  //     message: '加载中...',
  //     forbidClick: true,
  //     duration:0 //不会消失
  //   });
  // },
  computed: {
    ...mapState(['InputValue', 'isEnd', 'dataList'])
  },
  mounted () {
    window.addEventListener('scroll', this.loadMore)
    console.log(this)
    // bus.$on("event",(data)=>{
    //   this.InputValue=data;
    // })
    console.log(this.InputValue)
     this.$store.commit("hide")
      this.$store.commit("hide1")

  },
  methods: {
    ...mapMutations(['UpdateInputValue', 'setDataList', 'modifyIsEnd']),
    selectSortWay (SortNumber) {
      this.sortWay = SortNumber
    },
    handleSearch () {
      this.UpdateInputValue(this.value)// 输入框的值传给vuex中的InputValue
      this.$router.push(`/s/${this.value}`)// 修改完跳转路径
    },
    // 滚动加载
    loadMore () {
      var height = document.documentElement.scrollTop + document.documentElement.clientHeight - document.documentElement.scrollHeight
      // console.log(height)
      if (height >= -100 && !this.isEnd && height !== 0) {
        this.loadData += 40
        axios.get(`http://quan.lukou.com/api/search?word=${this.InputValue}&start=${this.loadData}&sort=${this.sortWay}&couponOnly=NaN&minPrice=0&maxPrice=99999`).then(res => {
          console.log(res.data.data)
          res.data.data.list.forEach(item => {
            if (item.saleNum >= 10000) {
              item.saleNum = (item.saleNum / 10000).toFixed(1) + '万'
            }
          })
          // console.log(res.data.data.list)
          this.modifyIsEnd(res.data.data.isEnd)
          this.setDataList(this.dataList.concat(res.data.data.list))
        })
      }
    }
  },
  // 这种办法实行重加载会影响滚动加载
  // updated () {
  //   // console.log(this.InputValue)
  //   axios.get(`http://quan.lukou.com/api/search?word=${this.InputValue}&start=0&sort=${this.sortWay}&couponOnly=NaN&minPrice=0&maxPrice=99999`).then(res => {
  //     // console.log(res.data.data.list)
  //     res.data.data.list.forEach(item => {
  //       if (item.saleNum >= 10000) {
  //         item.saleNum = (item.saleNum / 10000).toFixed(1) + '万'
  //       }
  //     })
  //     this.dataList = res.data.data.list
  //     this.isEnd = res.data.data.isEnd
  //     // console.log(res.data.data.list)
  //   })
  // },
  destroyed () {
    window.removeEventListener('scroll', this.loadMore)
     this.$store.commit("show")
      this.$store.commit("show1")
  }

}
</script>
<style lang="scss" scoped>
    .clearfix:after {
        content: "";
        display: block;
        overflow: hidden;
        visibility: hidden;
        width: 0px;
        height: 0px;
        clear: both;
    }
    *{
      margin:0;
      padding: 0;
    }
    ul{
      list-style:none;
       display: flex;
      justify-content: space-between;
      flex-wrap: wrap
    }
    a{
        text-decoration: none;
    }
    .selected{
      color: red!important;
    }
    .sortList{
        width: 100%;
        height:42px;
        margin-top: -22px;
        line-height:42px;
        display:flex;
        background: #fff;
        font-size: 18px;
        position:fixed;
        top:82px;
        // background: pink;
        left:0;
        li{
         
          width: 33.33333%;
          text-align: center;
            flex:1;
        }
    }
    .goApp{
       display: block;
       text-align: center;
       margin:34px 0px 170px;
     span{
        padding:10px 30px;
        border: 1px solid red;
        color: red;
        border-radius:60px;
        font-size:22px;
    }
   }
   .goSave{
       display: block;
       text-align: center;
       margin-bottom:20px;
   }
</style>